<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>易买网 - 首页</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="scripts/function.js"></script>
	<script type="text/javascript" src="scripts/jquery-1.8.3.js"></script>
	<style type="text/css">
		.open {
			height: auto;
			overflow: visible;
		}
		.bigclass {
			height: 16px;
			overflow: hidden;
		}
	</style>
</head>
<body>
<div id="header" class="wrap">
	<div id="logo"><img src="images/logo.gif" /></div>
	<div class="help"><a href="GetUserShoppingServlet" class="shopping">购物车</a>欢迎${Curr_User.username}<a href="ZhuXiaoServlet">切换用户</a><a href="guestbook.html">留言</a></div>
	<div class="navbar">
		<ul class="clearfix">
			<li class="current"><a href="index.jsp">首页</a></li>
			<li><a href="GetProductServlet?epcname=图书">图书</a></li>
			<li><a href="GetProductServlet?epcname=百货">百货</a></li>
			<li><a href="GetProductServlet?epcname=品牌">品牌</a></li>
			<li><a href="GetProductServlet?epcname=促销">促销</a></li>
		</ul>
	</div>
</div>
<div id="childNav">
	<div class="wrap">
		<ul class="clearfix">
			<li class="first"><a href="GetProductServlet?epcname=音乐">音乐</a></li>
			<li><a href="GetProductServlet?epcname=影视">影视</a></li>
			<li><a href="GetProductServlet?epcname=少儿">少儿</a></li>
			<li><a href="GetProductServlet?epcname=动漫">动漫</a></li>
			<li><a href="GetProductServlet?epcname=小说">小说</a></li>
			<li><a href="GetProductServlet?epcname=外语">外语</a></li>
			<li><a href="GetProductServlet?epcname=相机">数码相机</a></li>
			<li><a href="GetProductServlet?epcname=笔记本">笔记本</a></li>
			<li><a href="GetProductServlet?epcname=羽绒服">羽绒服</a></li>
			<li><a href="GetProductServlet?epcname=秋冬靴">秋冬靴</a></li>
			<li><a href="GetProductServlet?epcname=运动鞋">运动鞋</a></li>
			<li><a href="GetProductServlet?epcname=化妆品">美容护肤</a></li>
			<li><a href="GetProductServlet?epcname=家纺用品">家纺用品</a></li>
			<li><a href="GetProductServlet?epcname=奶粉">婴幼奶粉</a></li>
			<li><a href="GetProductServlet?epcname=饰品">饰品</a></li>
			<li class="last"><a href="#">Investor Relations</a></li>
		</ul>
	</div>
</div>
<div id="position" class="wrap">
	您现在的位置：<a href="index.jsp">易买网</a> &gt; <span id="psv">${epcname}</span>
	<div class="wrap" style="width: 300px; margin-left: 100px; float: right; position: relative; right: -8em">
		<ul class="clearfix">
			<form action="GetProListByName" method="post">
				<input type="text" name="keyword" size="20" style="font-size: 1.5em"/><input type="submit" value="搜索" style="font-size: 1.4em"/>
			</form>
		</ul>
	</div>
</div>

<div id="main" class="wrap">
	<div class="lefter">
		<div class="box">
			<h2>商品分类</h2>
			<div id="cglist" style="height: 300px; overflow: auto" ></div>
		</div>
		<div class="spacer"></div>
		<div class="last-view">
			<h2>最近浏览</h2>
			<dl class="clearfix">
				<dt><img src="images/product/1.jpg" width="80%"/></dt>
				<dd><a href="GetProductById?epid=1">法国德菲丝松露精品巧克力500g/盒</a></dd>
				<dt><img src="images/product/1.jpg" width="80%"/></dt>
				<dd><a href="GetProductById?epid=1">法国德菲丝松露精品巧克力500g/盒</a></dd>
			</dl>
			<script type="text/javascript">
                document.write("Cookie中记录的购物车商品ID："+ getCookie("product") + "，可以在动态页面中进行读取");
			</script>
		</div>
	</div>
	<div class="main">
		<div class="product-list">
			<h2><a href="GetProductServlet">全部商品</a></h2>
			<div class="pager">
				<ul class="clearfix">
					<li><a href="GetProductServlet?pageIndex=${pageIndex-1}&keyword=${keyword}&epcname=${epcname}">上一页</a></li>
					<li><a href="GetProductServlet?pageIndex=1&keyword=${keyword}&epcname=${epcname}">1</a></li>
					<li><a href="GetProductServlet?pageIndex=2&keyword=${keyword}&epcname=${epcname}">2</a></li>
					<li><a href="GetProductServlet?pageIndex=3&keyword=${keyword}&epcname=${epcname}">3</a></li>
					<li><a href="GetProductServlet?pageIndex=4&keyword=${keyword}&epcname=${epcname}">4</a></li>
					<li><a href="GetProductServlet?pageIndex=5&keyword=${keyword}&epcname=${epcname}">5</a></li>
					<li><a href="GetProductServlet?pageIndex=${pageIndex+1}&keyword=${keyword}&epcname=${epcname}">下一页</a></li>
				</ul>
			</div>
			<div class="clear"></div>
			<ul class="product clearfix">
				<c:forEach items="${productList}" var="p">
					<li>
						<dl>
							<dt><a href="GetProductById?epid=${p.epid}" target="_blank"><img src="images/product/${p.eppicturename}" /></a></dt>
							<dd class="title"><a href="GetProductById?epid=${p.epid}" target="_blank">${p.epname}</a></dd>
							<dd class="price">￥${p.price}</dd>
						</dl>
					</li>
				</c:forEach>

				</ul>
			<div class="clear"></div>
			<div class="pager">
				<ul class="clearfix">
					<li><a href="GetProductServlet?pageIndex=${pageIndex-1}&keyword=${keyword}&epcname=${epcname}">上一页</a></li>
					<li><a href="GetProductServlet?pageIndex=1&keyword=${keyword}&epcname=${epcname}">1</a></li>
					<li><a href="GetProductServlet?pageIndex=2&keyword=${keyword}&epcname=${epcname}">2</a></li>
					<li><a href="GetProductServlet?pageIndex=3&keyword=${keyword}&epcname=${epcname}">3</a></li>
					<li><a href="GetProductServlet?pageIndex=4&keyword=${keyword}&epcname=${epcname}">4</a></li>
					<li><a href="GetProductServlet?pageIndex=5&keyword=${keyword}&epcname=${epcname}">5</a></li>
					<li><a href="GetProductServlet?pageIndex=${pageIndex+1}&keyword=${keyword}&epcname=${epcname}">下一页</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="clear"></div>
</div>
<div id="footer">
	Copyright &copy; 2010 云和数据 All Rights Reserved. 京ICP证1000001号
</div>
</body>
</html>
<script>
    $(function () {
        $.ajax({
            type:"POST",
            url:"GetCgServlet",
            dataType:"JSON",
            success:function (data) {
                $(".dldl").remove();
                var count = 0;
                $.each(data, function (index, obj) {

                    if(obj.epcid == obj.epcpartentid){
                        if(count >0){
                            var v3 = "</dl>";
                            $("#cglist").append(v3);
                        }
                        var  v = "<dl class='dldl'><dt id='"+obj.epcid+"' class='bigclass'><a href='javascript:void(0)?epcid="+obj.epcid+"' onclick='list(this);'>"+obj.epcname+"</a></dt>";
                        $("#cglist").append(v);
                        count++;
                    }else {
                        var v2 = "<dd><a href='GetProductServlet?epcname="+obj.epcname+"'  id='blc'>"+obj.epcname+"</a></dd>";
                        $("dt[id='"+obj.epcpartentid+"']").append(v2);
                    }
                });
                //console.log("v4");
                var v4 = "</dl>";
                $("#cglist").append(v4);
            }
        });
    });

    function list(dtNode) {
        var dlNode = dtNode.parentNode;
        if (dlNode.className == "open") {
            dlNode.className = "bigclass";
        } else {
            dlNode.className = "open";
        }
    }
function setloc(obj) {
        var a=obj.valueOf();
        $("#psv").append(a);


}

</script>